<template>
  <div ref="pieRef" style="width: 100%; height: 35vh"></div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import useEchart from '@/hooks/useEchart'
import 'echarts-liquidfill'
const pieRef = ref<HTMLElement>()
const data = ref([0.5])
const color = ref(['#34D160'])
const option: any = {
  series: [
    {
      type: 'liquidFill',
      radius: '85%',
      center: ['50%', '45%'],
      data: data.value,
      backgroundStyle: {
        color: {
          type: 'linear',
          x: 1,
          y: 0,
          x2: 0.5,
          y2: 1,
          colorStops: [
            {
              offset: 1,
              color: 'green'
            },
            {
              offset: 0.5,
              color: 'orange'
            },
            {
              offset: 0,
              color: 'pink'
            }
          ],
          globalCoord: false
        }
      },
      outline: {
        borderDistance: 0,
        //边框颜色
        itemStyle: {
          borderWidth: 5,
          borderColor: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: 'red'
              },
              {
                offset: 0.5,
                color: 'blue'
              },
              {
                offset: 1,
                color: 'green'
              }
            ],
            globalCoord: false
          },
          shadowBlur: 10,
          shadowColor: 'rgba(53,142,215, 0.9)'
        }
      },
      color: color.value
    }
  ]
}
const { myChart } = useEchart(pieRef, option)
setInterval(() => {
  if (data.value[0] > 0.9) {
    data.value[0] = 0
  } else {
    data.value[0] = data.value[0] + 0.1
  }

  if (data.value[0] <= 0.5) {
    color.value[0] = '#32cd32'
  } else {
    color.value[0] = '#00C6FF'
  }
  myChart.value?.setOption(option)
}, 1000)
</script>
